/* -------------------------------------------- */
/*                     universal                               */
/* -------------------------------------------- */
div{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display:inline-block;
    margin-top:0;
}

/* -------------------------------------------- */
/*             Progress Bar specific                       */
/* -------------------------------------------- */
.progressOuter {
    width:80%;
    height:21px;
    background-color: black;
    position:relative;
    text-align:left;
    color:black;
}
.progressInner {
    height:15px;
    top:3px;
    position:absolute;
}
.progressExp {
    background-color:white;
    height:3px;
    top:12px;
    position:absolute;
}
.progressOuter:hover {
    background-color:#0A005F;
}
.progressInner:hover .progressOuter{
    background-color:#0A005F;
}
.progressExp:hover .progressOuter{
    background-color:#0A005F;
}
.leveling {
    background-color:#796914;
}
.level {
    color:yellow;
    margin-right:10px;
}
.pbarNum {
    position:absolute;
    font-size:14px;
    left:-33px;
    width:20px;
    font-weight:bold;
    top:2px;
}
.exp {
    position:absolute;
    color:white;
    font-size:14px;
    right:131px;
    top:2px;
}
.resGain {
    position:absolute;
    font-size:14px;
    right:68px;
    top:2px;
}
.resources {
    position:absolute;
    color:white;
    font-size:14px;
    right:21px;
    top:2px;
}
.progressOuter .coin {
    position: absolute;
    right:0;
    top:0px;
}
.gainAmount {
    position:absolute;
    font-size:14px;
    right:-72px;
    width:70px;
    top:2px;
}
.speedIcon {
    position:absolute;
    border-left:1px solid grey;
    width:20px;
    height:20px;
    right:-70px;
}
.speedMult {
    position:absolute;
    font-size:14px;
    right:-139px;
    width:70px;
    top:2px;
    vertical-align:top;
}
.buySpeed {
    right:-283px;
    width:134px;
}
.buyGain {
    right:-396px;
    width:95px;
}
.mult1 {
    right:-550px;
    width:134px;
}
.mult2 {
    right:-700px;
    width:134px;
}
.mult3 {
    right:-850px;
    width:134px;
}
.selectedButton {
    background-color:#545454 !important;
}


.pbuyButton {
    color:white;
    margin:0 5px;
    position:absolute;
    font-size:14px;
    background-color:grey;
    border-radius:2px;
    cursor:pointer;
    padding:0 2px;
    border:2px solid grey;
}
.pbuyButtonReady {
    border:2px solid blue;
}
.pbuyButtonReady:hover {
    border:2px solid #000096;
}
.pbuyButtonReady:active {
    border:2px solid #000096;
    background-color:black;
}


.middleLabel {
    text-align:center;
    font-size:16px;
    position:relative;
    display:block;
}
.firstProgressOuter {
    background-color:#424242;
}
.firstProgressInner {
    background-color:yellow;
}
.buttonContainer {
    width:20%;
    vertical-align:top;
}
.countCost {
    font-size:20px;
    margin-top:5px;
    margin-bottom:5px;
    display:inline-block;
    color:blue;
    font-weight:bold;
    margin-left:10px;
}

/* -------------------------------------------- */
/*                         helper                                */
/* -------------------------------------------- */
.number {
    color:black;
  vertical-align: top;
}
.buyButton {
    width:110px;
    height:80px;
    margin-bottom:7px;
    font-size:14px;
    border:2px solid grey;
    border-radius:10px;
    cursor:pointer;
}
.buyButton:hover {
    border:2px solid black;
}
.buyButton:active {
    background-color: #9a9a9a;
}
.resource {
    font-size:20px;
    margin-top:5px;
    margin-bottom:5px;
    display:block;
    color:blue;
    font-weight:bold;
}
.hyperVisible {
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
    color:white;
}
.objectContainer {
    width:100%;
    font-size:0;
    margin:0;
}
.quickButton {
    margin-left:10px;
    width:71px;
    background-color:black;
    font-size:14px;
    color:white;
    cursor:pointer;
    border:3px solid grey;
    border-radius:5px;
    padding:3px;
}
.quickButton:hover {
    border:3px solid red;
}
.quickButton:active {
    border:3px solid red;
    background-color:grey;
}
.isFirst {
    color:red;
}
.hovered {
    background-color:red;
}


/* Coin graphics */

.coin {
    content: "";
    width: 18px;
    height: 18px;
    display: inline-block;
    margin: 1px;
    border-radius: 50px;
    z-index: 500;
    position:relative;
    top:2px;
}

.coin p{
    font-style: italic;
    position: absolute;
    font-size: 12px;
    z-index: 700;
    top: -10px;
    width:17px;
    text-align:center;
}

.coin.bronze p{  color: rgba(223,182,103,1);}
.coin.silver p{  color: rgb(96, 96, 96);}
.coin.gold p{  color: rgb(122, 107, 27);}


.coin:after{
    content: "";
    width: 13px;
    height: 13px;
    display: block;
    top: 1px;
    left: 1px;
    position: absolute;
    border-radius: 50px;
    z-index: 600;
}

.coin:before{
    content: "";
    width: 15px;
    height: 15px;
    display: block;
    position: absolute;
    border-radius: 50px;
    z-index: 500;
    left:1px;
    top:1px;
}


.silver{
    background: linear-gradient(45deg,  rgba(160,160,160,1) 0%,rgba(232,232,232,1) 56%);
}

.silver:before{
    background: linear-gradient(45deg,  rgba(181,181,181,1) 0%,rgba(252,252,252,1) 56%,rgba(232,232,232,1) 96%);
    border: 1px solid rgba(181,181,181,1);
}


.silver:after{
    background: linear-gradient(45deg,  rgba(181,181,181,1) 0%,rgba(252,252,252,1) 56%,rgba(232,232,232,1) 96%);
    border-top: 1px solid rgba(255,255,255,0.3);
    border-left: 1px solid rgba(255,255,255,0.3);
    border-bottom: 1px solid rgba(160,160,160,0.3);
    border-right: 1px solid rgba(160,160,160,0.5);
    box-shadow: inset 0px 0px 2px 2px rgba(150, 150, 150, .05);
}

.gold{
    background: linear-gradient(45deg,  rgba(242,215,12,1) 0%,rgba(255,255,255,1) 56%,rgba(252,235,0,1) 96%);
}

.gold:before{
    background: linear-gradient(45deg,  rgba(242,215,12,1) 0%,rgba(255,255,255,1) 56%,rgba(252,235,0,1) 96%);
    border: 1px solid rgba(242,215,12,1);
}


.gold:after{
    background: linear-gradient(45deg,  rgba(242,215,12,1) 0%,rgba(255,255,255,1) 56%,rgba(252,235,0,1) 96%);
    border-top: 1px solid rgba(255,255,255,0.3);
    border-left: 1px solid rgba(255,255,255,0.3);
    border-bottom: 1px solid rgba(242,215,12,0.3);
    border-right: 1px solid rgba(242,215,12,0.3);
    box-shadow: inset 0px 0px 2px 2px rgba(150, 150, 150, .05);
}
